<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线留言 - 黑龙江旅游</title>
    <link rel="stylesheet" href="D:\web1\travel\css\base.css" type="text/css" media="all">
    <link rel="stylesheet" href="D:\web1\travel\css\forms.css" type="text/css" media="all">
    <link rel="stylesheet" href="D:\web1\travel\css\message.css" type="text/css" media="all">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="main">
        <!-- 顶部搜索栏和导航 -->
        <div class="top-bar">
            <div class="search-box">
                <form action="search.html" method="get">
                    <input type="text" name="keyword" placeholder="搜索景点、攻略...">
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
            
            <ul class="top-nav" id="userNav">
                <li><a href="login.html"><i class="fa fa-user-circle"></i> 登录</a></li>
                <li><a href="register.html"><i class="fa fa-user-plus"></i> 注册</a></li>
                <li><a href="about.html"><i class="fa fa-info-circle"></i> 关于我们</a></li>
            </ul>
        </div>

        <!-- 主导航菜单 -->
        <div class="main-menu">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="history.html">历史沿革</a></li>
                <li><a href="geography.html">地理位置</a></li>
                <li><a href="culture.html">风俗文化</a></li>
                <li><a href="attractions.html">景点选择</a></li>
                <li><a href="products.html">名优特产</a></li>
                <li><a href="message.html">在线留言</a></li>
            </ul>
            <!-- 移动端汉堡菜单按钮 -->
            <button class="menu-toggle"><i class="fa fa-bars"></i></button>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="bar">
                <h3>在线留言</h3>
            </div>
            
            <div class="message-container">
                <!-- 留言表单区域 -->
                <div class="message-form-section">
                    <h4>留下您的宝贵意见</h4>
                    <form action="#" method="post" id="messageForm">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" id="name" name="name" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="email">电子邮箱</label>
                            <input type="email" id="email" name="email" class="form-control" required>
                            <span class="form-hint">我们会保护您的隐私，不会泄露您的邮箱</span>
                        </div>

                        <div class="form-group">
                            <label for="phone">手机号码</label>
                            <input type="tel" id="phone" name="phone" class="form-control" pattern="1[3-9]\d{9}">
                            <span class="form-hint">选填，方便我们联系您解决问题</span>
                        </div>

                        <div class="form-group">
                            <label for="message-date">留言日期</label>
                            <input type="date" id="message-date" name="message-date" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="message-type">留言类型</label>
                            <select id="message-type" name="message-type" class="form-control" required>
                                <option value="">请选择留言类型</option>
                                <option value="suggestion">建议反馈</option>
                                <option value="question">旅游咨询</option>
                                <option value="complaint">投诉举报</option>
                                <option value="praise">表扬鼓励</option>
                                <option value="other">其他类型</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="message-content">留言内容</label>
                            <textarea id="message-content" name="message-content" class="form-control" 
                                      rows="6" minlength="10" required></textarea>
                            <span class="form-hint">请详细描述您的想法或问题，至少10个字符</span>
                        </div>

                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="anonymous" id="anonymous"> 匿名留言
                            </label>
                        </div>

                        <button type="submit" class="btn submit-btn">提交留言</button>
                    </form>
                </div>

                <!-- 留言展示区域 -->
                <div class="message-list-section">
                    <h4>游客留言展示</h4>
                    
                    <div class="filter-controls">
                        <input type="text" id="filter-keyword" placeholder="搜索留言内容...">
                        <select id="filter-type">
                            <option value="all">全部类型</option>
                            <option value="suggestion">建议反馈</option>
                            <option value="question">旅游咨询</option>
                            <option value="complaint">投诉举报</option>
                            <option value="praise">表扬鼓励</option>
                            <option value="other">其他类型</option>
                        </select>
                    </div>

                    <!-- 留言列表 -->
                    <div class="message-list">
                        <!-- 留言项1 -->
                        <div class="message-item" data-type="praise">
                            <div class="message-header">
                                <h5>张先生 <span class="message-type">表扬鼓励</span></h5>
                                <span class="message-date">2023-10-15</span>
                            </div>
                            <div class="message-body">
                                <p>哈尔滨冰雪大世界真的太壮观了！非常感谢网站提供的详细攻略，让我们的旅行非常顺利，下次还会再来！</p>
                            </div>
                            <div class="message-reply">
                                <details>
                                    <summary>查看回复</summary>
                                    <p>感谢您的肯定，我们会继续努力提供更好的服务和信息，期待您的再次光临！</p>
                                </details>
                            </div>
                        </div>

                        <!-- 留言项2 -->
                        <div class="message-item" data-type="question">
                            <div class="message-header">
                                <h5>李女士 <span class="message-type">旅游咨询</span></h5>
                                <span class="message-date">2023-10-10</span>
                            </div>
                            <div class="message-body">
                                <p>请问五大连池风景区冬季开放吗？适合带老人和小孩去吗？有没有特别需要注意的事项？</p>
                            </div>
                            <div class="message-reply">
                                <details>
                                    <summary>查看回复</summary>
                                    <p>五大连池冬季正常开放，适合全家游览。冬季气温较低，建议做好保暖措施，景区内部分路段可能较滑，建议穿防滑鞋。</p>
                                </details>
                            </div>
                        </div>

                        <!-- 留言项3 -->
                        <div class="message-item" data-type="suggestion">
                            <div class="message-header">
                                <h5><i class="fa fa-user-secret"></i> 匿名 <span class="message-type">建议反馈</span></h5>
                                <span class="message-date">2023-10-05</span>
                            </div>
                            <div class="message-body">
                                <p>建议网站增加一些当地特色美食的介绍，以及各个景点之间的交通方式和大概耗时，这样对游客规划行程会更有帮助。</p>
                            </div>
                            <div class="message-reply">
                                <details>
                                    <summary>查看回复</summary>
                                    <p>感谢您的宝贵建议，我们正在筹备相关内容，近期会更新上线，敬请期待！</p>
                                </details>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="end">
            <p>© 黑龙江旅游网 版权所有 | 联系电话：0451-12345678 | 地址：哈尔滨市南岗区中山路</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 检查用户登录状态并获取用户信息
            function checkLoginStatus() {
                // 在实际应用中，这里应该从服务器或cookie/localStorage获取用户信息
                // 这里使用模拟数据
                const userInfo = localStorage.getItem('userInfo');
                return userInfo ? JSON.parse(userInfo) : null;
            }
            
            // 自动填充表单
            function autoFillForm(user) {
                if (user) {
                    document.getElementById('name').value = user.name;
                    document.getElementById('email').value = user.email;
                    
                    // 如果有手机号信息也可以自动填充
                    if (user.phone) {
                        document.getElementById('phone').value = user.phone;
                    }
                    
                    // 禁用姓名和邮箱字段，防止修改
                    document.getElementById('name').disabled = true;
                    document.getElementById('email').disabled = true;
                    
                    // 更新导航栏显示
                    updateNavigation(user.name);
                }
            }
            
            // 更新导航栏显示
            function updateNavigation(username) {
                const navElement = document.getElementById('userNav');
                navElement.innerHTML = `
                    <li><span class="logged-in-user"><i class="fa fa-user-circle"></i> ${username}</span></li>
                    <li><a href="#" id="logoutBtn"><i class="fa fa-sign-out"></i> 退出</a></li>
                    <li><a href="about.html"><i class="fa fa-info-circle"></i> 关于我们</a></li>
                `;
                
                // 添加退出登录事件
                document.getElementById('logoutBtn').addEventListener('click', function(e) {
                    e.preventDefault();
                    localStorage.removeItem('userInfo');
                    window.location.reload();
                });
            }
            
            // 初始化页面
            const currentUser = checkLoginStatus();
            if (currentUser) {
                autoFillForm(currentUser);
            } else {
                // 设置默认日期为今天
                document.getElementById('message-date').valueAsDate = new Date();
            }

            // 表单提交处理
            const form = document.getElementById('messageForm');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 未登录用户提示
                if (!currentUser) {
                    if (!confirm('您尚未登录，是否继续提交留言？登录后可以更方便地跟踪留言回复。')) {
                        return;
                    }
                }
                
                // 显示提交成功动画
                const submitBtn = document.querySelector('.submit-btn');
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 提交中...';
                
                // 模拟提交延迟
                setTimeout(() => {
                    alert('留言提交成功，感谢您的反馈！我们会尽快处理并回复。');
                    form.reset();
                    // 如果是登录用户，重新填充姓名和邮箱
                    if (currentUser) {
                        autoFillForm(currentUser);
                    } else {
                        document.getElementById('message-date').valueAsDate = new Date();
                    }
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }, 1500);
            });

            // 留言筛选功能
            const filterKeyword = document.getElementById('filter-keyword');
            const filterType = document.getElementById('filter-type');
            const messageItems = document.querySelectorAll('.message-item');
            
            function filterMessages() {
                const keyword = filterKeyword.value.toLowerCase();
                const type = filterType.value;
                
                messageItems.forEach(item => {
                    const content = item.textContent.toLowerCase();
                    const itemType = item.getAttribute('data-type');
                    
                    const keywordMatch = content.includes(keyword);
                    const typeMatch = type === 'all' || itemType === type;
                    
                    if (keywordMatch && typeMatch) {
                        item.style.display = 'block';
                        // 添加淡入动画
                        item.classList.add('fade-in');
                        setTimeout(() => item.classList.remove('fade-in'), 500);
                    } else {
                        item.style.display = 'none';
                    }
                });
            }
            
            filterKeyword.addEventListener('input', filterMessages);
            filterType.addEventListener('change', filterMessages);

            // 移动端菜单切换
            const menuToggle = document.querySelector('.menu-toggle');
            const mainMenuUl = document.querySelector('.main-menu ul');
            
            menuToggle.addEventListener('click', function() {
                mainMenuUl.classList.toggle('show');
            });
        });
    </script>
</body>
</html>
